<template>
  <div class="container">
    <!-- 如果用户提交过申请，则显示审核状态，否则显示申请表单 -->
    <div v-if="hasSubmitted">
      <el-card class="status-card">
        <div class="status-container">
          <el-steps :active="currentStep" finish-status="success" style="margin-bottom: 20px;">
            <el-step v-for="step in steps" :key="step.title" :title="step.title" :icon="step.icon"></el-step>
          </el-steps>
          <el-table :data="statusData" class="full-width-table">
            <el-table-column prop="auth_id" label="认证ID"></el-table-column>
            <el-table-column prop="status" label="审核状态"></el-table-column>
            <el-table-column prop="review_date" label="审核日期"></el-table-column>
          </el-table>

        </div>
      </el-card>
      <div style="text-align: center;margin: 10px">
        <el-button type="info" @click="showStatus">切换审核状态</el-button>
      </div>
    </div>
    <div v-else>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="身份证号">
          <el-input v-model="form.idNumber"></el-input>
        </el-form-item>

        <el-form-item label="MCN公司名称">
          <el-input v-model="form.mcnName"></el-input>
        </el-form-item>

        <el-form-item label="MCN公司编号">
          <el-input v-model="form.registrationNumber"></el-input>
        </el-form-item>

        <el-form-item label="联系邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>

        <div style="text-align: center">
          <el-button type="primary" @click="submitForm">提交申请</el-button>
          <el-button type="info" @click="showStatus">切换审核状态</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        idNumber: '',
        mcnName: '',
        registrationNumber: '', // 修改为 MCN机构注册编号
        email: ''
      },
      hasSubmitted: false, // 用于判断是否提交过申请
      currentStep: 1, // 当前步骤索引
      steps: [
        { title: '提交申请', icon: 'el-icon-edit' },
        { title: '审核中', icon: 'el-icon-loading' },
        { title: '审核通过', icon: 'el-icon-check' }
      ],
      statusData: [
        {
          auth_id: '00013',
          status: '审核中',
          review_date: '2024-08-15'
        },
        // 这里可以添加更多假数据
      ]
    };
  },
  methods: {
    submitForm() {
      this.hasSubmitted = true; // 提交表单后设置为已提交
      this.$message({
        message: '申请已提交！',
        type: 'success'
      });
    },
    showStatus() {
      if (this.hasSubmitted){
        this.hasSubmitted= false
      }else {
        this.hasSubmitted= true
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.status-container {
  margin-top: 20px;
}

.status-card {
  width: 100%;
}

.full-width-table {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px; /* 增加表单项之间的间距 */
}

.el-button {
  margin-right: 10px; /* 增加按钮之间的间距 */
}
</style>
